<template>
	<view class="practice">
    <statusBar></statusBar>
		<uni-nav-bar left-icon="back" :title="examName"></uni-nav-bar>
		<view style="height:10px;background-color: #f2f2f2;"></view>
		<view class="practice-list" v-show="activeIndex == index" v-for="(item, index) in queList" :key="index">
			<view class="practice-title">
				{{ index + 1 }}、{{ item.QueTitle }}
				<text v-if="item.QusTypeId == 1">单选题</text>
				<text class="duoxuantext" v-if="item.QusTypeId == 2">多选题</text>
				<text class="panduantext" v-if="item.QusTypeId == 3">判断题</text>
			</view>
			<view style="height:10px;background-color: #f2f2f2;"></view>

			<radio-group @change="radioChange($event,index)" v-if="item.QusTypeId != 2">
				<label v-if="item.QueOptionA">
					<view>
						<radio value="A" />
					</view>
					<view>{{item.QueOptionA}}</view>
				</label>
				<label v-if="item.QueOptionB">
					<view>
						<radio value="B" />
					</view>
					<view>{{item.QueOptionB}}</view>
				</label>
				<label v-if="item.QueOptionC">
					<view>
						<radio value="C" />
					</view>
					<view>{{item.QueOptionC}}</view>
				</label>
				<label v-if="item.QueOptionD">
					<view>
						<radio value="D" />
					</view>
					<view>{{item.QueOptionD}}</view>
				</label>
				<label v-if="item.QueOptionE">
					<view>
						<radio value="E" />
					</view>
					<view>{{item.QueOptionE}}</view>
				</label>
				<label v-if="item.QueOptionF">
					<view>
						<radio value="F" />
					</view>
					<view>{{item.QueOptionF}}</view>
				</label>
			</radio-group>

			<checkbox-group v-model="queModel[index]" @change="CheckboxChange($event,item,index)" v-if="item.QusTypeId == 2">
				<label v-if="item.QueOptionA">
					<checkbox value="A" /><text>{{item.QueOptionA}}</text>
				</label>
				<label v-if="item.QueOptionB">
					<checkbox value="B" /><text>{{item.QueOptionB}}</text>
				</label>
				<label v-if="item.QueOptionC">
					<checkbox value="C" /><text>{{item.QueOptionC}}</text>
				</label>
				<label v-if="item.QueOptionD">
					<checkbox value="D" /><text>{{item.QueOptionD}}</text>
				</label>
				<label v-if="item.QueOptionE">
					<checkbox value="E" /><text>{{item.QueOptionE}}</text>
				</label>
				<label v-if="item.QueOptionF">
					<checkbox value="F" /><text>{{item.QueOptionF}}</text>
				</label>
			</checkbox-group>

			<view class="btngroup">
				<button @click="goPrev">上一题</button>
				<button @click="goNext">下一题</button>
			</view>

			<view class="wline"></view>

		</view>

		<view class="footlist">
			<view class="footcount" @click="showQueList">
				<image src="../../static/img/exam/list.png"></image>
				<text class="footcount-num"><text> {{ activeIndex + 1 }} </text> / {{ queList.length }} </text>
			</view>
			<view class="footlistbtn">
				<button @click="colTF(item.ColQueId,index)" v-for="(item,index) in colList" v-show="activeIndex == index && item.IsCollected == true">取消收藏</button>
				<button @click="colTF(item.ColQueId,index)" v-for="(item,index) in colList" v-show="activeIndex == index && item.IsCollected == false">收藏</button>
				<button @click="errpop = true">纠错</button>
				<button @click="confirmQue">提交</button>
			</view>
		</view>

		<uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>

		<popup-layer ref="popup" direction="top">
			<view class="quelist">
				<view class="quelisthead">
					答题卡（ <text>{{ activeIndex + 1 }} </text> / {{ queList.length }} ）
				</view>
				<view class="cardlist">
					<view @click="jumpQue(index)" v-for="(item,index) in queList" :key="index" class="card-list" :class="{already: queModel[index].length > 0}">{{index + 1}}</view>
				</view>
			</view>
		</popup-layer>

		<view class="errpop" v-if="errpop == true">
			<view class="errpopcontent">
				<view class="errpop-title">纠错</view>
				<view class="errpop-center">
					<view class="errpop-ot">错误描述</view>
					<textarea v-model="jiucuoMiaoshu" />
					<view class="errpop-ot">联系方式</view>
          <input v-model="jiucuoPhone" type="text" />
          <button @click="confirmJiucuo">确定</button>
        </view>
    	</view>
    </view>
  </view>
</template>

<script>
  import statusBar from "@/components/status-bar.vue"
  import popupLayer from '@/components/popup-layer/popup-layer.vue';
  import uniPopup from '@/components/uni-popup/uni-popup.vue';
  
export default {
  components: {
    popupLayer,
    uniPopup,
    statusBar
  },
  data() {
    return {
      activeIndex: 0,
      errpop: false,
      type: '',
      examName: '',
      paperId: '',
      paperInfo: [],
      queList: [],
      queModel: [],
      jiucuoMiaoshu: '',
      jiucuoPhone: '',
      colList: [],
      examType: '',
      examId:	0,
    };
  },
  onLoad: function (option) { 
    if(option.type == 'practice'){
      this.getQueList('api/student/Practice/GetAllQueByPaper?paperId='+ option.id +'');
      this.paperId = option.id;
      this.examType = 'practice';
    }else{
      this.getQueList('api/student/exam/GetMockExamQue?examId='+ option.id +'');
      this.paperId = option.id;
      this.examType = 'mock';
			this.examId = option.id;
    }
      
  },
  watch:{
    queModel: function(){
    }
  },
  created() {
    uni.showLoading({
    	title: 'loading'
    });
  },
  methods: {
    radioChange(evt,index) {
      this.queModel[index] = evt.detail.value;
      
    },
    CheckboxChange(e,item,index) {  
      this.queModel[index] = e.detail.value;
    },
    //提交试卷
    confirmQue: function(){
      console.log(this.queModel);
      var answerList = [];
      var danxuanCount = 0;
      var duoxuanCount = 0;
      var panduanCount = 0;
      var totalScore = 0.0;
      for(var i = 0; i < this.queModel.length; i++){
        answerList.push('');
        answerList[i] = this.queModel[i].toString();
        answerList[i] = answerList[i].replace(/,/g, '');
      }
      console.log(answerList);
      for (let i in answerList) {
      	if(answerList[i] == this.queList[i].Answer){
          this.queList[i].IsCorrect = true;
          if(this.queList[i].QusTypeId == '1'){
            danxuanCount++;
          }else if(this.queList[i].QusTypeId == '2'){
            duoxuanCount++;
          }else if(this.queList[i].QusTypeId == '3'){
            panduanCount++;
          }
        }else{
          this.queList[i].IsCorrect = false;
        }
      }
      
      if(this.paperInfo.singleChoiceScore){
        totalScore = danxuanCount * this.paperInfo.singleChoiceScore + duoxuanCount * this.paperInfo.multipleChoiceScore + panduanCount * this.paperInfo.trueFalseScore;
      }else{
        totalScore = danxuanCount * this.paperInfo.SingleChoiceScore + duoxuanCount * this.paperInfo.MultipleChoiceScore + panduanCount * this.paperInfo.TrueFalseScore;
      }
      
      var obj = {};
      obj.history = [];
      obj.paperId = this.paperId;
      obj.totalScore = totalScore;
      console.log(answerList);
      for (let i = 0; i < answerList.length; i++) {
      	obj.history[i] = {};
        obj.history[i].Title = '';
        obj.history[i].Title = this.queList[i].QueTitle;
        obj.history[i].RightAnswer = '';
        obj.history[i].RightAnswer = this.queList[i].Answer;
        obj.history[i].UserChoice = '';
        obj.history[i].UserChoice = answerList[i];
        obj.history[i].QueId = '';
        obj.history[i].QueId = this.queList[i].QueId;
        obj.history[i].PaperId = this.paperId;
        obj.history[i].IsCorrect = '';  
        obj.history[i].IsCorrect = this.queList[i].IsCorrect;  
        obj.history[i].Options = '';
        obj.history[i].Options = this.queList[i].QueOptionA + ';' + this.queList[i].QueOptionB + ';' + this.queList[i].QueOptionC + ';' + this.queList[i].QueOptionD + ';' + this.queList[i].QueOptionE + ';' + this.queList[i].QueOptionF + ';';
        obj.history[i].Options = obj.history[i].Options.replace(/null;/gi, "");
      }
      var hisData = JSON.stringify(obj);
      
			if(this.examType == 'practice'){
				//提交 终极押题与全真模拟
				uni.request({
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					url: this.apiUrl + 'api/student/Practice/SubmitHistoryBatch',
					data: hisData,
					success: res => {
						console.log(res);
						if(res.data.state == 'success'){
							this.msg = '提交成功';
							this.togglePopup('middle');
							uni.navigateBack({
									delta: 1
							});
						}else{
							this.msg = '提交出错';
							this.togglePopup('middle');
						}
					}
				});				
			}
			else{
				//提交模拟考试SubmitLiveExamQue
				obj.examId = this.examId;
				obj.score = obj.totalScore;
				uni.request({
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					url: this.apiUrl + 'api/student/Exam/SubmitLiveExamQue',
					data: JSON.stringify(obj),
					success: res => {
						console.log(res);
						if(res.data.state == 'success'){
							this.msg = '提交成功';
							this.togglePopup('middle');
							uni.navigateBack({
									delta: 1
							});
						}else{
							this.msg = '提交出错';
							this.togglePopup('middle');
						}
					}
				});
			}
			
    },
    //上一题
    goPrev: function(){
      this.activeIndex--;
      if (this.activeIndex < 0) {
        this.activeIndex = 0;
      }
    },
    //下一题
    goNext: function(){
      if (this.activeIndex == (this.queList.length - 1)) {
        this.activeIndex = (this.queList.length - 1);
      }else{
        this.activeIndex++;
      }
    },
    //展示答题卡
    showQueList: function(){
      this.$refs.popup.show()
    },
    //点击答题卡跳转
    jumpQue: function(index){
      this.activeIndex = index;
      this.$refs.popup.close()
    },
    confirmJiucuo: function(){
      this.errpop = false;
      
      if(this.jiucuoPhone == ''){
          this.msg = '请填写联系方式';
          this.togglePopup('middle');
          return false;
      }
      
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Personal/SubmitQueError',
        data: {
            QueId: this.queList[this.activeIndex].QueId,
            content: this.jiucuoMiaoshu,
            contact: this.jiucuoPhone
        },
        success: res => {
          if(res.data.state == 'success'){
            this.msg = '提交成功';
            this.togglePopup('middle');
          }else{
            this.msg = '纠错失败';
            this.togglePopup('middle');
          }
        }
      });
    },
    colTF: function(id,index){
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Practice/CancelColQue', 
        data: JSON.stringify(id),
        success: res => {
          console.log(res);
          if(res.statusCode == 200){
            this.colList[index].IsCollected = !this.colList[index].IsCollected;
            this.msg = '操作成功';
            this.togglePopup('middle');
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    //加载题目
    getQueList: function(url){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + url,
        data: {},
        success: res => {
          if(res.data.state == 'success'){
            
            if(this.examType == 'practice'){
              this.examName = res.data.data.chapterName;
              this.paperInfo = res.data.data;
              this.queList = res.data.data.queList;
              this.colList = res.data.data.colList;
            }else{
              
              this.queList = res.data.data.queList;
              this.colList = res.data.data.colList;
              this.examName = res.data.data.exam.ExamName;
              this.paperInfo = res.data.data.paper;
            }
            uni.hideLoading();
            for (let i = 0; i < this.queList.length; i++) {
              this.queModel.push([]);
            }
          }else{
            this.msg = '加载题目列表错误';
            this.togglePopup('middle');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.practice-list{
  background-color: #ffffff;
}
.practice-title {
  padding: 15upx 20upx;
}
.practice-title text {
  display: inline-block;
  color: #FFFFFF;
  padding: 3upx 15upx;
  background-color: #27b28b;
  margin-left: 20upx;
  border-radius: 8px;
}
.practice-title text.duoxuantext{
  background-color: #0A9CE8;
}
.practice-title text.panduantext{
  background-color: #FF5979;
}
uni-checkbox-group{
  display: block;
  padding-top: 40upx;
}
uni-checkbox-group label{
  display: flex;
  padding: 7px 15px;
}
uni-checkbox-group label uni-checkbox{
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-checkbox .uni-checkbox-input{
  border-radius: 50px;
  border: none;
}
uni-radio-group{
  display: block;
  padding-top: 40upx;
}
uni-radio-group label{
  display: flex;
  padding: 7px 15px;
}
uni-radio-group label uni-radio{
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-radio .uni-radio-input{
  border-radius: 50px;
  border: none;
}
uni-checkbox-group {
  display: block;
  padding-top: 40upx;
}
wx-checkbox-group {
  display: block;
  padding-top: 40upx;
}
uni-checkbox-group label {
  display: flex;
  padding: 7px 15px;
}
wx-checkbox-group label {
  display: flex;
  padding: 7px 15px;
}
uni-checkbox-group label uni-checkbox {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
wx-checkbox-group label wx-checkbox {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-checkbox .uni-checkbox-input {
  border-radius: 50px;
  border: none;
}
wx-checkbox .uni-checkbox-input {
  border-radius: 50px;
  border: none;
}
uni-radio-group {
  display: block;
  padding-top: 40upx;
}
wx-radio-group {
  display: block;
  padding-top: 40upx;
}
uni-radio-group label {
  display: flex;
  padding: 7px 15px;
}
wx-radio-group label {
  display: flex;
  padding: 7px 15px;
}
uni-radio-group label uni-radio {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
wx-radio-group label wx-radio {
  margin-right: 10upx;
  position: relative;
  top: -2px;
}
uni-radio .uni-radio-input {
  border-radius: 50px;
  border: none;
}
wx-radio .wx-radio-input {
  border-radius: 50px;
  border: none;
}
wx-checkbox .uni-checkbox-input {
  border-radius: 50px;
}
wx-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  color: #27b28b !important;
}
.btngroup{
  margin: 40upx auto;
}
.btngroup button{
  width: 140upx;
  height: 60upx;
  line-height: 60upx;
  font-size: 14px;
  display: inline-block;
  border: none;
  padding: 0;
  margin-left: 25upx;
  color: #595959;
}
.footlist{
  height: 55px;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
  text-align: right;
  line-height: 55px;
  border-top: #dddddd;
}
.footcount{
  height: 100%;
  padding: 0 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footcount image{
  width: 20px;
  height: 22px;
  vertical-align: text-bottom;
  margin-right: 20upx;
}
.footcount-num{
  font-size: 14px;
  color: #7E7E7E;
}
.footcount-num text{
  color: #27B28B;
  margin-right: 5px;
}
.footlistbtn{
  height: 100%;
  display: flex;
  align-items: center;
}
.footlistbtn button{
  width: 140upx;
  height: 60upx;
  line-height: 60upx;
  font-size: 14px;
  display: inline-block;
  border: none;
  padding: 0;
  margin-right: 25upx;
  background-color: #27B28B;
  color: #FFFFFF;
}
.quelist{
  background-color: #F2F2F2;
  height: 500px;
  overflow-y: scroll;
}
.quelisthead{
  background-color: #27B28B;
  color: #FFFFFF;
  height: 40px;
  text-align: center;
  font-size: 16px;
  background-color: #27B28B;
  line-height: 40px;
}
.quelisthead text{
  margin: 0 15upx;
  line-height: 40px;
}
.card-list{
  width: 100upx;
  height: 100upx;
  border-radius: 50px;
  background-color: #FFFFFF;
  line-height: 100upx;
  text-align: center;
  float: left;
  margin: 20upx 1upx 0upx 20upx;
}
.cardlist view.already{
  background-color: #3485FB;
}
.errpop{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  background-color: rgba(0,0,0,0.5);
}
.errpopcontent{
  width: 600upx;
  height: 800upx;
  background-color: #FFFFFF;
  margin: 260upx auto 0 auto;
  border-radius: 5px;
  overflow: hidden;
}
.errpop-title{
  height: 80upx;
  background-color: #27B28B;
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.errpop-center{
  padding: 0 40upx;
}
.errpop-ot{
  font-size: 16px;
  padding-top: 25px;
  padding-bottom: 20px;
}
.errpop-center textarea{
  width: 500upx;
  height: 140upx;
  padding: 10upx;
  border: 1px solid #DDDDDD;
  border-radius: 5px;
  font-size: 13px;
}  
.errpop-center input{
  height: 60upx;
  line-height: 60upx;
  padding-left: 20upx;
  border: 1px solid #DDDDDD;
}
.errpop-center button{
  width: 500upx;
  height: 60upx;
  line-height: 60upx;
  margin: 50upx auto 0 auto;
  background-color: #27B28B;
  padding: 0;
  color: #FFFFFF;
}
</style>
